body {
    font-family: 'Poppins', sans-serif;
}

.textInfo {
    position: absolute;
    top: 50%;
    float: left;
    color: white;
}

#doorlock-container {
    position: absolute;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 0.1px;
    flex-wrap: wrap;
    font-weight: 600;
text-decoration: none;
    text-shadow: 0.05vh 0.05vh 0.01vh rgba(0, 0, 0, 0.389);
font-style: normal;
font-variant: small-caps;
text-transform: none;
    font-family: Arial, Helvetica, sans-serif;
    top: 45vh;
    font-size:18px;
    padding: 0.6em;
    width: fit-content;
    color: white;
    border-radius: 0.2em;
    left: -15%;
}

.slide_in {
    animation: slide-in 1s forwards;
}

.slide_out {
    animation: slide-out 1s forwards;
}

@keyframes slide-in {
    0% {
        left: -15%;
    }
    100% {
        left: 0.5%;
    }
}

@keyframes slide-out {
    0% {
        left: 0.5%;
    }
    100% {
        left: -15%;
    }
}